<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>风扇仪表盘</title>  
    <style>  
        body {  
            text-align: center;  
            font-family: Arial, sans-serif;  
            background-color: #f0f0f0;  
            padding: 20px;  
            background-image: url('a2.jpg'); /* 替换为你的图片路径 */  
            background-size: cover; /* 背景图覆盖整个区域 */  
            background-repeat: no-repeat; /* 不重复背景图 */  
            background-position: center; /* 背景图位置居中 */  
        }  
        canvas {  
            border: 2px solid #007BFF;  
            margin: 20px auto;  
            display: block;  
        }  
        button {  
            margin: 10px;  
            padding: 10px 20px;  
            font-size: 16px;  
            cursor: pointer;  
        }  
        h1 {  
            color: #333;  
        }  
    </style>  
</head>  
<body>  
    <h1>风扇仪表盘</h1>  
    <canvas id="fanSpeedMeter" width="300" height="300"></canvas>  
    <div>  
        <button onclick="setSpeed(1)">低挡</button>  
        <button onclick="setSpeed(2)">中挡</button>  
        <button onclick="setSpeed(3)">高挡</button>  
    </div>  

    <script>  
        const canvas = document.getElementById('fanSpeedMeter');  
        const ctx = canvas.getContext('2d');  

        let currentSpeed = 0; // 当前风速  

        function drawFanSpeed(speed) {  
            // 清空画布  
            ctx.clearRect(0, 0, canvas.width, canvas.height);  
            
            // 绘制表盘  
            ctx.beginPath();  
            ctx.arc(150, 150, 100, 0, Math.PI * 2);  
            ctx.fillStyle = '#e7f1ff';  
            ctx.fill();  
            ctx.strokeStyle = '#007BFF';  
            ctx.stroke();  

            // 绘制中心指示  
            ctx.beginPath();  
            ctx.font = '24px Arial';  
            ctx.textAlign = 'center';  
            ctx.fillStyle = '#333';  
            ctx.fillText(`风速: ${speed} RPM`, 150, 150);  

            // 计算指针的角度并绘制  
            const angle = (speed / 300) * (Math.PI * 2) - Math.PI / 2; // 假设最大风速为300 RPM  
            ctx.beginPath();  
            ctx.moveTo(150, 150);  
            ctx.lineTo(150 + 80 * Math.cos(angle), 150 + 80 * Math.sin(angle));  
            ctx.strokeStyle = '#FF0000';  
            ctx.lineWidth = 5;  
            ctx.stroke();  
        }  

        function setSpeed(level) {  
            switch (level) {  
                case 1:  
                    currentSpeed = 100; // 低挡  
                    break;  
                case 2:  
                    currentSpeed = 200; // 中挡  
                    break;  
                case 3:  
                    currentSpeed = 300; // 高挡  
                    break;  
                default:  
                    currentSpeed = 0;  
                    break;  
            }  
            drawFanSpeed(currentSpeed);  
        }  

        // 初始绘制  
        drawFanSpeed(currentSpeed);  
    </script>  
</body>  
</html>